<template>
<div>
<el-container>
  <el-header>
    <div>
    <el-avatar type="primary" style="position:absolute;left:0.5%;top:1.5%;margin-left: 16px" @click.native="info()">
     <img v-if="user.photo != null" :src="user.photo"/>
     <span v-if="user.photo === null || user.photo === undefined">{{role}}</span>
    </el-avatar>
      STC在线评价系统
    </div>
  </el-header>
  <el-container>
    <el-aside width="15%">
        <el-menu>
            <el-submenu index="1" v-if="role === '管理员'">
                <template slot="title"><span class="banner">管理员端</span></template>
                <el-menu-item index="1-1" @click="routerTo('1-1')">学生管理</el-menu-item>
                <el-menu-item index="1-2" @click="routerTo('1-2')">老师管理</el-menu-item>
                <el-menu-item index="1-2" @click="routerTo('1-3')">学院管理</el-menu-item>
                <el-menu-item index="1-3" @click="routerTo('1-4')">班级管理</el-menu-item>
                <el-menu-item index="1-4" @click="routerTo('1-5')">任务管理</el-menu-item>
                <el-menu-item index="1-5" @click="routerTo('1-6')">课程管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2"  v-if="role === '老师'">
                <template slot="title"><span class="banner">教师端</span></template>
                <el-menu-item index="2-1" @click="routerTo('2-1')">教学调查</el-menu-item>
                <el-menu-item index="2-5" @click="routerTo('2-2')">教师自评</el-menu-item>
                <el-menu-item index="3-6" @click="routerTo('2-3')">查询结果</el-menu-item>
                <el-menu-item index="3-6" @click="routerTo('2-4')">教师听课</el-menu-item>
            </el-submenu>
            <el-submenu index="3"  v-if="role === '学生'">
                <template slot="title"><span class="banner">学生端</span></template>
                <el-menu-item index="3-1" @click="routerTo('3-1')">任务评价和反馈</el-menu-item>
                <el-menu-item index="3-2" @click="routerTo('3-2')">问题反馈</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
    <el-main>

      <el-drawer v-if="role != '管理员'" :visible.sync="drawer" direction="ltr"	 title="I am the title" :with-header="false">
        <el-card style="background-color:#c6e2ff">
        <el-row :gutter="10">
           <el-col :span="6">
            <el-avatar style="margin-top:20px;margin-left:10px;" :size="80" :src="user.photo"/>
           </el-col>
           <el-col :span="3">
             <el-tag style="margin-top:50px;margin-left:10px;">{{user.username}}</el-tag>
           </el-col>
        </el-row>
        </el-card>
        <el-card>
        <el-row :gutter="20">
            <el-card shadow="hover" style="height:100%;font-size:12px;" @click.native="my()">
              修改信息
            </el-card>
        </el-row>
        <el-row :gutter="20">
            <el-card shadow="hover" style="height:100%;font-size:12px;" @click.native="logout()">
              退出系统
            </el-card>
        </el-row>
        </el-card>
      </el-drawer>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</div>
</template>
<script>
export default {
  // 创建了一个组件，组件的名字为name
  name: 'Home',
  data () {
    return {  
      user: {},
      role: '',
      drawer: false
    }
  },
  created () {
    const role = window.sessionStorage.getItem('role')
    this.role = role
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  methods: {

    
    info() {
      this.drawer = true
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },

    my() {
      this.drawer=false
      this.$router.push('/home/information')
    },


    routerTo(name) {
      

      if(name === '1-1') {
        this.$router.push('/home/student/manager')
        return;
      }

      if(name === '1-2') {
        this.$router.push('/home/teacher/manager')
        return;
      }

      if(name === '1-3') {
        this.$router.push('/home/deparment/manager')
        return;
      }

      if(name === '1-4') {
        this.$router.push('/home/classes/manager')
        return;
      }

      if(name === '1-5') {
        this.$router.push('/home/task/manager')
        return;
      }

      if(name === '1-6') {
        this.$router.push('/home/course/manager')
        return;
      }

      if(name === '3-1') {
        this.$router.push('/home/task/student')
        return;
      }


      if(name === '3-2') {
        this.$router.push('/home/question/student')
        return;
      }


      if(name === '3-3') {
        this.$router.push('/home/reuslt/student')
        return;
      }

      if(name === '2-1') {
        this.$router.push('/home/search/teacher')
        return;
      }


      if(name === '2-2') {
        this.$router.push('/home/self/teacher')
        return;
      }


      if(name === '2-3') {
        this.$router.push('/home/result/teacher')
        return;
      }


      if(name === '2-4') {
        this.$router.push('/home/listening/teacher')
        return;
      }


    }
  }
}
</script>
<style>
.el-row {
  margin-bottom:15px;
}
</style>